import {
  CheckboxGroup,
  Divider,
  Image, Tag
} from 'ant-design-vue';
import VXETable from 'vxe-table';
import { Icon } from '/@/components/Icon';
import { useI18n } from '/@/hooks/web/useI18n';
import { getName } from '/@/utils/data/area';
const PreviewGroup = Image.PreviewGroup
// import {useGo} from '/@/hooks/web/usePage';

// const go = useGo();

VXETable.renderer.add('MenuTitle', {
  // 默认显示模板
  renderDefault (renderOpts, params) {
    const { t } = useI18n();
    const { row } = params
    if (row.meta) {
      return t(row.meta.title)
    }
    return [];
  },
  // 导出模板，例如导出插槽中自定义的内容
  exportMethod (params) {
    const { row, column } = params
    return row.bannerUrl;
  }
})

VXETable.renderer.add('MenuIcon', {
  renderDefault (renderOpts, params) {
    const { row } = params
    if (row.meta.icon) {
      return <Icon icon={row.meta.icon}/>
    }
    return [];
  },
  // 导出模板，例如导出插槽中自定义的内容
  exportMethod (params) {
    const { row, column } = params
    return row.bannerUrl;
  }
})
// MenuButtonList
VXETable.renderer.add('MenuButtonList', {
  renderDefault (renderOpts, params) {
    const { row } = params
    const result = [] as any[]
    if (row.buttonList) {
      row.buttonList.forEach(e => {
        // result.push(<Tag style="margin: 2px 2px" color="default">{e.name}</Tag>);
        result.push(<a title={e.memo} style="color:grey;cursor:default;">{e.name}<Divider type="vertical"/></a>);
      })
    }
    return result;
  },
  // 导出模板，例如导出插槽中自定义的内容
  exportMethod (params) {
    const { row, column } = params
    return row.bannerUrl;
  }
})

VXETable.renderer.add('MenuButtonListOfRole', {
  renderDefault (renderOpts, params) {
    const { row, $table } = params
    const one = $table.getCheckboxRecords(true).filter(e => e.ID === row.ID)
    const disabled = !(one.length > 0)
    const options = row.buttonList && row.buttonList.map(e => {
      return {'label': e.name, 'value': e.ID}
    }) || []
    return <CheckboxGroup v-model:value={row.ownedBidList} options={options} disabled={disabled}></CheckboxGroup>
  },
})

VXETable.renderer.add('AdminUserRoleList', {
  renderDefault: function (renderOpts, params) {
      const {row,} = params
      const result: any[] = []
      row.roles.forEach((e: any) => {
        result.push(<Tag color="orange">{e.name}</Tag>)
      })
      return result;
  },
})

VXETable.renderer.add('Area', {
  renderDefault: function (renderOpts, params) {
      const {row,} = params
      if (row.area) {
        const codeList:any[] = row.area.split(',')
        const nameList = codeList.map(e => getName(e))
        return nameList.join(' / ');
      }
      return '';
  },
})

VXETable.renderer.add('GoodsCateIcon', {
  renderDefault (renderOpts, params) {
    const { row } = params
    if (row.icon) {
      return <Icon icon={row.icon}/>
    }
    return [];
  },
  // 导出模板，例如导出插槽中自定义的内容
  exportMethod (params) {
    const { row, column } = params
    return row.bannerUrl;
  }
})

VXETable.renderer.add('GoodsImage', {
  renderDefault: function (renderOpts, params) {
    const {row,} = params
    const list: any[] = []
    if (row.images) {
      row.images.forEach((e: any) => {
          const url = import.meta.env.VITE_GLOB_STATIC_URL + e.path;
          list.push(<Image src={url} width="50%" onClick={(e) => e.stopPropagation()}></Image>)
      })
    }
    return (
      <PreviewGroup>
        {...list}
      </PreviewGroup>
    );
  },
  // 导出模板
  exportMethod(params) {
    const { row, } = params
    let img = ''
    if (row.images && row.images.length > 0) {
      const url = import.meta.env.VITE_GLOB_STATIC_URL
      img = `<img src='${url + row.images[0].path}' width=33% />`
    }
    console.log(img)
    return img
  }
})

VXETable.renderer.add('GoodsSpecs', {
  renderDefault: function (renderOpts, params) {
    const {row,} = params
    const specs = row.specs ?? row.goods.specs
    
    const list: any[] = []
    if (specs) {
      specs.split(',').forEach((e:any) => {
        list.push(<Tag style="margin: 2px 2px">{e}</Tag>)
      })
    }
    return list;
  },
  // 导出模板
  exportMethod(params) {
    const { row, } = params
    return row.specs
  }
})

// switch(row.status) {
//   case 1: tip = '未审核'; break;
//   case 2: tip = '已审核'; break;
//   case 3: tip = '已关闭'; break;
//   case 4: tip = '已作废'; break;
//   default: tip = '未知';
// }
VXETable.renderer.add('SheetStatus', {
  renderDefault: function (renderOpts, params) {
      const {row,} = params
      let color = 'green';
      let tip = '未知';
      switch(row.status) {  
        case 1: tip = '未审核'; color = 'yellow'; break;
        case 2: tip = '已审核'; break;
        case 3: tip = '已关闭'; color = 'processing'; break;
        case 4: tip = '已作废'; color = 'red'; break;
      }
      return (<Tag color={color} style="padding:0 6px;">{tip}</Tag>)
  },
})

VXETable.renderer.add('BillType', {
  renderDefault: function (renderOpts, params) {
      const {row,} = params
      let ioTypeDict = row.ioTypeDict
      if (!ioTypeDict) {
        ioTypeDict = row.bill?.ioTypeDict
      }
      const color = 'green';
      // let tip = '未知';
      // switch(row.status) {  
      //   case 1: tip = '未审核'; color = 'yellow'; break;
      //   case 2: tip = '已审核'; break;
      //   case 3: tip = '已关闭'; color = 'processing'; break;
      //   case 4: tip = '已作废'; color = 'red'; break;
      // }
      return (<Tag color={color} style="padding:0 6px;">{ ioTypeDict?.label }</Tag>)
  },
})
